<template>
  <div class="myInfo">
    <hmNavBar title="我的资料" path="/home/my"></hmNavBar>
    <!-- 给个type让子组件判断要渲染图片还是文本 -->
    <myCell
      class="mtb"
      title="头像"
      :value="userInfo.avatar"
      @click="goEdit('avatar')"
      type="img"
    >
    </myCell>
    <div class="conent">
      <myCell
        title="昵称"
        :value="userInfo.nickname"
        @click="goEdit('nickname')"
      >
      </myCell>
      <myCell
        title="性别"
        :value="genderObj[userInfo.gender]"
        @click="showGender = true"
      >
      </myCell>
      <myCell
        title="地区"
        @click="showArea = true"
        :value="area.city_list[userInfo.area]"
      >
      </myCell>
      <myCell @click="goEdit('intro')" title="个人简介" :value="userInfo.intro">
      </myCell>
      <van-button block class="btn mt20" @click="exit"
        ><span>退出登录</span></van-button
      >
    </div>
    <van-popup v-model="showGender" position="bottom" @closed="closeEvent">
      <!-- 利用v-if做静默刷新 -->
      <van-picker
        title="性别选择"
        show-toolbar
        v-if="bol"
        :columns="Object.values(genderObj)"
        :default-index="userInfo.gender"
        @confirm="genderChange"
        @cancel="showGender = false"
      >
      </van-picker>
    </van-popup>
    <van-popup v-model="showArea" position="bottom">
      <van-area
        v-if="bol"
        title="城市选择"
        :area-list="area"
        :columns-num="2"
        :value="userInfo.area"
        @confirm="areaChange"
        @cancel="showArea = false"
      >
      </van-area>
    </van-popup>
  </div>
</template>
<script>
import myCell from './my-cell.vue'
// 获取userInfo的数据,使用mapState来获取
import { mapState } from 'vuex'
// 导入区域,先在静态资源建立js文件,把van里的区域数据copy去新建的区域js
import area from '@/assets/js/area'
// 按需导入
import { removeToken } from '@/utils/token'
// 导入接口
import { auEdit } from '@/api/my'
export default {
  components: {
    myCell
  },
  computed: {
    ...mapState(['userInfo'])
  },
  // 利用监听做城市的静默刷新
  watch: {
    showArea (newval) {
      if (!newval) {
        this.bol = false
        this.$nextTick(() => {
          this.bol = true
        })
      }
    }
  },
  data () {
    return {
      // 接收导入的城市数据
      area: area,
      //   给个数组对应性别
      genderObj: { 0: '保密', 1: '男', 2: '女' },
      showGender: false,
      showArea: false,
      // 静默刷新
      bol: true
    }
  },
  methods: {
    //   弹出框
    // dialog.comfirm({title:'提示',message:'内容'}).then((res)=>{成功干啥}).catch(()=>{取消})
    // 确认退出后,提示,删除token,修改登陆状态,跳转路由
    exit () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '你确认退出该网站吗?'
        })
        .then(res => {
          // 提示
          this.$toast.success('退出成功')
          // 删除token
          removeToken()
          //   修改登陆状态
          this.$store.commit('setIsLogin', true)
          //   跳转路由
          this.$router.push('/login')
        })
        .catch(() => {})
    },
    // 选择性别方法
    async genderChange (value, index) {
      console.log(value, index)
      //   //   关闭窗口
      this.showGender = false
      //   //   加载中
      //   this.$toast.loading({
      //     duration: 0
      //   })
      //   //   发送请求,先封装
      //   const res = await auEdit({
      //     gender: index
      //   })
      //   this.$toast.success('修改成功')
      //   this.$store.dispatch('refreshUserInfo')
      //   console.log(res)
      //   调用封装好的修改方法
      this.aueditInfo({
        gender: index
      })
    },
    async areaChange (value, index) {
      console.log(value, index)
      //   关闭窗口
      this.showArea = false
      //   //   加载中
      //   this.$toast.loading({
      //     duration: 0
      //   })
      //   //   发送请求, 先封装
      //   const res = await auEdit({
      //     area: value[1].code
      //   })
      //   this.$toast.success('修改成功')
      //   this.$store.dispatch('refreshUserInfo')
      //   console.log(res)
      // 调用封装好的共同请求
      this.aueditInfo({
        area: value[1].code
      })
    },
    // 共同请求封装一个方法
    async aueditInfo (data) {
      //   加载中
      this.$toast.loading({
        duration: 0
      })
      //   发送请求, 先封装
      const res = await auEdit(data)
      this.$toast.success('修改成功')
      this.$store.dispatch('refreshUserInfo')
      console.log(res)
    },
    // 去到修改昵称页面
    goEdit (src) {
      this.$router.push('/home/editInfo?type=' + src)
    },
    // 利用v-if做静默刷新
    closeEvent () {
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    }
  },
  mounted () {
    //   设置body背景颜色
    document.body.style.backgroundColor = '#f6f3f4'
  },
  beforeDestroy () {
    //   离开这个页面吧body的颜色变回去
    document.body.style.backgroundColor = '#ffffff'
  }
}
</script>
<style lang="less" scoped>
.myInfo {
  padding: 0 @p15;
  .mtb {
    margin: 18px 0 10px;
  }
  .mt20 {
    margin-top: 20px;
    span {
      color: red;
    }
  }
}
</style>
